<template>
    <div class="addList">
        <div class="add-list">
            <div class="add-item flex-a flex-b" v-for="item in list" :key="item.addressId" @click="selAddress(item)">
                <div class="left">
                    <div class="flex-a"><span class="name">{{ item.userName }}</span><span class="phone">{{ item.userPhone
                    }}</span>
                    </div>
                    <div class="address">{{ item.provinceName + item.cityName + item.regionName + item.detailAddress }}
                    </div>
                </div>
                <div class="right" @click.stop="editAddress(item)">编辑</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getAddressList } from '../../../../api/index'
export default {
    components: {

    },
    setup() {
        const data = reactive({
            addressList: [
                // {
                //     addressId: 3,
                //     defaultAddress: true,
                //     fullAddress: "北京市北京市东城区万达广场",
                //     phone: "18470124046",
                //     userName: "方善凯",
                // }
            ],
            dataOptions: {
                id: 'addressId',
                addressDetail: 'testaddressDetail',
                addressName: 'userName'
            },
            list: [],
            type: '',
            goodsId: '',
            cartItemIds: [] as any
        });

        onMounted(() => {
            getAddressList().then(response => {
                if (response.resultCode == 200) {
                    data.list = response.data
                    // let data = response.data, arr = [] as any
                    // data.forEach(item => {
                    //     let obj = {
                    //         phone: ''
                    //     } as any
                    //     obj.phone = item.userPhone
                    //     obj.addressId = item.addressId
                    //     obj.userName = item.userName
                    //     obj.defaultAddress = item.defaultFlag == 1 ? true : false
                    //     obj.fullAddress = item.provinceName + item.cityName + item.regionName + item.detailAddress
                    //     arr.push(obj)
                    // })
                    // //console.log(arr)
                    // data.addressList = arr
                    // //console.log(data.addressList)
                }
            })
            const router = useRouter();
            if (router.params.type) {
                data.type = router.params.type
            }
            if (router.params.goodsId) {
                data.goodsId = router.params.goodsId
            }
            if (router.params.cartItemIds) {
                data.cartItemIds = router.params.cartItemIds
            }
        });
        const clickItem = () => {
            //console.log('Click To Address');
        }
        const editClick = () => {
            //console.log('Click To Edit');
        }
        const delClick = () => {
            //console.log('Click To Delete');
        }
        const delClickSwipe = () => {
            //console.log('Click On DelClickSwipe');
        };
        const addAddress = () => {
            //console.log('Click To Add');
            Taro.navigateTo({ url: '/pages/writeAddress/index' });
        }
        const editAddress = (item) => {
            Taro.navigateTo({ url: '/packageA/pages/writeAddress/index?addressId=' + item.addressId + '&cartItemIds=' + data.cartItemIds });
        }
        const selAddress = (item) => {
            if (data.type == 'buy') {
                Taro.redirectTo({ url: '/packageA/pages/productDetail/index?addressId=' + item.addressId + '&goodsId=' + data.goodsId + '&type=' + data.type });
            } else {
                Taro.redirectTo({ url: '/packageA/pages/confirmOrder/index?addressId=' + item.addressId + '&cartItemIds=' + data.cartItemIds });
            }
        }
        return {
            ...toRefs(data), clickItem,
            delClick,
            editClick,
            delClickSwipe,
            addAddress,
            editAddress,
            selAddress,
        }
    }
};
</script>


<style lang="scss" >
.addList {
    .add-list {
        .add-item {
            padding: 20rpx 30rpx;
            box-sizing: border-box;
            background: #fff;

            .left {
                .name {
                    color: #212121;
                    margin-right: 10rpx;
                    font-size: 34rpx;
                }

                .phone {
                    color: #808080;
                    font-size: 28rpx;
                }

                .address {
                    color: #404040;
                    margin-top: 20rpx;
                    font-size: 30rpx;
                }
            }

            .right {
                color: #C0C0C0;
                font-size: 30rpx;
            }
        }
    }

    .nut-address-list__bottom {
        position: fixed;
        bottom: 0;

        .nut-button {
            background: #4972F2;
        }
    }
}
</style>